<template>
  <div>
      <van-nav-bar class="my-head" fixed :title="title" @click-left="onClickLeft">
      <template #right>
       
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
          class="popover"
          @select="selectclick"
        >
          <template #reference>
             <van-icon name="ellipsis" size="38" />
          </template>
        </van-popover>
      </template>
      <template #left v-if="back">
        <van-icon name="arrow-left" size="38" />
        <span class="color">返回</span>
      </template>
    </van-nav-bar>
    <van-action-sheet
      v-model="show"
      :actions="list"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="chooseaction"
    />
  </div>
    

</template>


<script>
export default {
   props:[
     "title",
     "back",
     "login",
     "search"
   ],
   data(){
     return {
       show:false,
       showPopover:false,
       list:[
         { name: '扫一扫' }, { name: '相册选择' }, { name: '直接拍照' }
       ],
       actions:[
          { text: '搜索',icon:"search", value:"search" , disabled:this.search}, 
          { text: '登录' ,icon:"contact", value:"login" , disabled:this.login },
          { text: '拍照' ,icon:'scan',value:'scan'}
       ]
     }
   },
   methods:{
     chooseaction(e){
        this.$toast(e.name+' success')
     },
     onCancel(){
       this.show = false;
     },
     selectclick(e){
       console.log(e)
       if(e.value=='login'){
         this.$router.push({name:'login'})
       }else if(e.value=="search"){
         this.$router.push({name:'search'})
       }else if(e.value=='scan'){
         this.show = true
       }
     },
     onClickLeft(){
       this.$router.go(-1)
     }
   }
}
</script>

<style lang="scss" >
.color{
  color:#1989fa;
}
.popover{
    ::v-deep .van-popover__action-text{
      justify-content: center;
      width:50px !important;
  }
}

.my-head{
  z-index:10000;
}

</style>

